import { modelListTenant } from "@/services/languageModel";
import { formatMessage } from 'umi-plugin-react/locale';
import { Button, Card, Col, Divider, Form,Icon,Input, Row, Select,InputNumber, message,Drawer, DatePicker, Dropdown, Menu, Tag } from "antd";
import React from "react";
import testData from "../resourceManage/testData";
import { packageAdd, packageDetail, packageTypeList, packageUpdate, resourceManageList, resourceOptionList } from "@/services/chargingManage";
import moment from "moment";
import UserSession from "@/UserSession";

class PackageDrawer extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      visible:false,
      id:null,
      readOnly:false,
      modelOriginList:[],
      modelList:[],
      customOriginList:[],
      customList:[],
      allResourceList:[],
      packageTypeOptions:[],
      editPackage:false,
      defaultDes: "",
      limit: {},
    }
  }

  componentDidMount(){
    if(this.props.onRef){
      this.props.onRef(this)
    }
  }

  getLlmList = async () => {
    const res = await resourceOptionList({resourceType:15})
    
    this.setState({modelOriginList:res})
  }

  getCustomList = async () => {
    const res = await resourceOptionList({resourceType:16})
    
    this.setState({customOriginList:res})
  }

  initModal = (row,readOnly) => {
    this.setState({
      visible:true,
      id:row?.id,
      readOnly
    },() => {
      this.getLlmList()
      this.getCustomList()
      this.getAllResourceList()
      this.getPackageTypeList()
      if(row){
        this.getInfo()
        this.getDefaultDes();
      }
    })
  }

  getAllResourceList = async () => {
    const res = await resourceManageList()
    let allResourceList = []
    for(const item of res){
      if(item.children && item.children.length > 0){
        for(const child of item.children){
          allResourceList.push(child)
        }
      }
    }    
    this.setState({allResourceList})
  }

  getInfo = async () => {
    const res = await packageDetail({id:this.state.id})
    const { form:{setFieldsValue} } = this.props;
    let typeIds = res.type.split(",").map(item => parseInt(item))
    
    

    this.setState({editPackage:res.using})

    //处理资源
    const modelList = []
    const customList = []
    for(const item of res.detailList){
      if(item.resourceType == 15){
        //模型
        modelList.push({
          id:item.resourceId,
          resourceName:item.resourceName
        })
        this.setState({modelList},() => {
          setFieldsValue({...this.returnFieldByInfo(item.resourceId,item)})
        })
      }else if(item.resourceType == 16){
        //自定义资源
        customList.push({
          id:item.resourceId,
          resourceName:item.resourceName
        })
      }else{    
        setFieldsValue({...this.returnFieldByInfo(item.resourceType,item)})
      }
    }

    this.setState({customList})
    await this.getDefaultDes();
    setFieldsValue({
      name:res.name,
      purpose:parseInt(res.purpose),
      enableDate:moment(res.enableDate),
      disableDate:moment(res.disableDate),
      typeIds,
      describeStr:res.describeStr  || this.state.defaultDes,
      price:res.price
    })
  }

  getDefaultDes = async () => {
    const res = await packageDetail({ id: this.state.id });
    this.setState({
      limit: {
        ask: null,
        admin: null,
        user: null,
        work: null,
        worktime: null,
      },
    });
    res.detailList.forEach((item) => {
      const type = item.resourceType;
      const num = item.num;
      const isLimit = item.isLimit === 1 ? true : false;
      const typeMap = {
        15: "ask",
        10: "admin",
        11: "user",
        14: "work",
        17: "worktime",
      };

      const targetField = typeMap[type] || "default";

      const newValue = isLimit ? num : "不限";

      this.setState((prevState) => ({
        limit: {
          ...prevState.limit,
          [targetField]: newValue,
        },
      }));
    });

    let des = `1.问答次数：${
      this.state.limit.ask
    } \n2.模型：${this.state.modelList.map((item, index) => {
      return item.resourceName;
    })}\n3.用户管理员数：${this.state.limit.admin}\n4.用户数：${
      this.state.limit.user
    }\n5.工单量:${this.state.limit.work}，工单时长:${
      this.state.limit.worktime
    }`;
    this.setState({ defaultDes: des });
    if (res.describeStr !== null) {
      return describeStr;
    } else {
      return des;
    }
  };
  onClose = () => {
    this.props.form.resetFields()
    this.setState({
      visible:false,
      id:null,
      readOnly:false,
      modelList:[],
      customList:[]
    })
  }

  renderHourBox = (getFieldValue,getFieldDecorator,param) => (
      <div style={{display:'flex',alignItems:"center",gap:'8px'}}>
        <Form.Item style={{marginBottom:0}}>
          {getFieldDecorator(param.fieldPrefix+'_isLimit',{initialValue:1})(
              <Select   style={{ width: 'fit-content'}} disabled={this.state.readOnly || this.state.editPackage}>
                <Select.Option value={1}>{formatMessage({ id: 'chargingManage.packageManage.packageDrawer.limited' })}</Select.Option>
                <Select.Option value={0}>{formatMessage({ id: 'chargingManage.packageManage.packageDrawer.unlimited' })}</Select.Option>
              </Select>
          )}
        </Form.Item>
        {
          getFieldValue(param.fieldPrefix+'_isLimit') == 1 ? (
              <>
                <span>{param.isEveryOne ? '每' : '总时长'}</span>
                {
                  param.isEveryOne ? (
                      <Form.Item style={{marginBottom:0}}>
                        {getFieldDecorator(param.fieldPrefix+'_timeLimit',{initialValue:1})(
                            <Select disabled={this.state.readOnly || this.state.editPackage}>
                              <Select.Option value={1}>{formatMessage({ id: 'chargingManage.packageManage.packageDrawer.month' })}</Select.Option>
                              <Select.Option value={2}>{formatMessage({ id: 'chargingManage.packageManage.packageDrawer.year' })}</Select.Option>
                            </Select>
                        )}
                      </Form.Item>
                  ) : ''
                }
                <Form.Item style={{marginBottom:0}}>
                  {getFieldDecorator(param.fieldPrefix+'_num',{rules: [{ required: true, message: formatMessage({ id: 'chargingManage.packageManage.packageDrawer.pleaseInput' }) }]})(
                      <InputNumber min={0} precision={0} disabled={this.state.readOnly  || this.state.editPackage} />
                  )}
                </Form.Item>
                <span>{param.unitText}</span>

                <Divider type="vertical" style={{height:32}} />

                <span>上限</span>
                <Form.Item style={{marginBottom:0}}>
                  {getFieldDecorator(param.fieldPrefix+'_maxNum',{rules: [{ required: true, message: formatMessage({ id: 'chargingManage.packageManage.packageDrawer.pleaseInput' }) }]})(
                      <InputNumber min={0} precision={0} disabled={this.state.readOnly  || this.state.editPackage} />
                  )}
                </Form.Item>
                <span>{param.unitText}</span>
                <Form.Item style={{marginBottom:0}}>
                  {getFieldDecorator(param.fieldPrefix+'_numOverflow',{initialValue:1,rules: [{ required: true, message: formatMessage({ id: 'chargingManage.packageManage.packageDrawer.pleaseInput' }) }]})(
                      <Select style={{width:200}} disabled={this.state.readOnly || this.state.editPackage}>
                        <Select.Option value={1}>{formatMessage({ id: 'chargingManage.packageManage.packageDrawer.overflowAllowed' })}</Select.Option>
                        <Select.Option value={0}>{formatMessage({ id: 'chargingManage.packageManage.packageDrawer.overflowNotAllowed' })}</Select.Option>
                      </Select>
                  )}
                </Form.Item>
              </>
          ) : ''
        }
      </div>
  )

  renderNumberBox = (getFieldValue,getFieldDecorator,param) => (
    <div style={{display:'flex',alignItems:"center",gap:'8px'}}>      
      <Form.Item style={{marginBottom:0}}>
        {getFieldDecorator(param.fieldPrefix+'_isLimit',{initialValue:1})(
          <Select style={{ width: 'fit-content'}} disabled={this.state.readOnly || (this.state.editPackage && param.modelType !== true)}>
            <Select.Option value={1}>{formatMessage({ id: 'chargingManage.packageManage.packageDrawer.limited' })}</Select.Option>
            <Select.Option value={0}>{formatMessage({ id: 'chargingManage.packageManage.packageDrawer.unlimited' })}</Select.Option>
          </Select>
        )}
      </Form.Item>
      {
        getFieldValue(param.fieldPrefix+'_isLimit') == 1 ? (
          <>
            <span>{param.isEveryOne ? formatMessage({ id: 'chargingManage.packageManage.packageDrawer.each' }) : formatMessage({ id: 'chargingManage.packageManage.packageDrawer.totalAmount' })}</span>
            {
              param.isEveryOne ? (
                <Form.Item style={{marginBottom:0}}>
                  {getFieldDecorator(param.fieldPrefix+'_timeLimit',{initialValue:1})(
                    <Select disabled={this.state.readOnly || (this.state.editPackage && param.modelType !== true)}>
                      <Select.Option value={1}>月</Select.Option>
                      <Select.Option value={2}>年</Select.Option>
                    </Select>
                  )}
                </Form.Item>
              ) : ''
            }
            <Form.Item style={{marginBottom:0}}>
              {getFieldDecorator(param.fieldPrefix+'_num',{rules: [{ required: true, message: '请输入' }]})(
                <InputNumber min={0} precision={0} disabled={this.state.readOnly || (this.state.editPackage && param.modelType !== true)} />
              )}
            </Form.Item>
            <span>{param.unitText}</span>

            <Divider type="vertical" style={{height:32}} />

            <span>上限</span>
            <Form.Item style={{marginBottom:0}}>
              {getFieldDecorator(param.fieldPrefix+'_maxNum',{rules: [{ required: true, message: '请输入' }]})(
                <InputNumber min={0} precision={0} disabled={this.state.readOnly || (this.state.editPackage && param.modelType !== true)} />
              )}
            </Form.Item>
            <span>{param.unitText}</span>
            <Form.Item style={{marginBottom:0}}>
              {getFieldDecorator(param.fieldPrefix+'_numOverflow',{initialValue:1,rules: [{ required: true, message: '请输入' }]})(
                <Select style={{width:200}} disabled={this.state.readOnly || (this.state.editPackage && param.modelType !== true)}>
                  <Select.Option value={1}>可溢出(上限量停用)</Select.Option>
                  <Select.Option value={0}>不可溢出(标准量停用)</Select.Option>
                </Select>
              )}
            </Form.Item>
          </>
        ) : ''
      }
    </div>
  )

  validateForm = () => {
    this.props.form.validateFields((error,values) => {
      console.log(values);
      
      if(!error){
        const { modelList,customList,allResourceList } = this.state;
        let obj = {}
        let detailList = []
        for(const key in values){
          if(key.indexOf("_") == -1){
            obj[key] = key== 'enableDate' || key =='disableDate' ? moment(values[key]).format("YYYY-MM-DD") :  values[key]
          }
        }

        //固定资源
        for(let i = 0;i<18;i++){
          if (i == 16 || i == 15) {
            continue
          }
          const index = allResourceList.findIndex(item => item.resourceType == i);
          if(index != -1){
            detailList.push({
              ...this.returnField(i,values),
              resourceType:i,
              resourceId:allResourceList[index].id
            })
          }
          
        }

        //模型资源
        for(const item of modelList){
          detailList.push({
            ...this.returnField(item.id,values),
            resourceType:15,
            resourceName:item.resourceName,
            resourceId:item.id
          })
        }

        //自定义资源
        for(const item of customList){
          detailList.push({
            ...this.returnField(item.id,values),
            resourceType:16,
            resourceName:item.resourceName,
            resourceId:item.id
          })
        }

        obj.detailList = detailList
        this.doSubmit(obj)
        
      }
    })
  }

  doSubmit = async obj => {
    let res = {}
    if(this.state.id){
      obj.id = this.state.id
      res = await packageUpdate(obj)
    }else{
      res = await packageAdd(obj)
    }
    message.info(res.message)
    this.onClose()
    this.props.refreshList()
  }

  addModel = item => {
    const { modelList } = this.state;
    modelList.push(item)
    this.setState({modelList})
  }

  removeModel = id => {
    const { modelList } = this.state;
    const newList = modelList.filter(item => item.id != id)
    this.setState({modelList:newList})
  }

  addCustom = item => {
    const { customList } = this.state;
    customList.push(item)
    this.setState({customList})
  }

  removeCustom = id => {
    const { customList } = this.state;
    const newList = customList.filter(item => item.id != id)
    this.setState({customList:newList})
  }

  returnField = (prefix,values) => {
    return {
      isLimit:values[prefix+'_isLimit'],
      timeLimit:values[prefix+'_timeLimit'],
      num:values[prefix+'_num'],
      maxNum:values[prefix+'_maxNum'],
      numOverflow:values[prefix+'_numOverflow'],
    }
  }

  returnFieldByInfo = (prefix,value) => {
    return {
      [prefix+'_isLimit']:value['isLimit'],
      [prefix+'_timeLimit']:value['timeLimit'],
      [prefix+'_num']:value['num'],
      [prefix+'_maxNum']:value['maxNum'],
      [prefix+'_numOverflow']:value['numOverflow'],
    }
  }

  getPackageTypeList = async () => {
    const res = await packageTypeList()
    this.setState({packageTypeOptions:res})
  }

  render(){
    const { visible,id,readOnly,modelOriginList,modelList,customOriginList,customList,packageTypeOptions } = this.state;
    const { form:{getFieldDecorator,getFieldValue} } = this.props;
    const isAdmin = UserSession.getCurrentUser().tenantId == 1 
    const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
    };
    const modelIds = modelList.map(item => item.id)
    const customIds = customList.map(item => item.id)
    const menu = (
      <Menu>
        {
          modelOriginList.map(item => {
            return modelIds.indexOf(item.id) === -1 ? (
              <Menu.Item key={item.id} onClick={() => this.addModel(item)}>{item.resourceName}</Menu.Item>
            ) : ''
          })
        }
      </Menu>
    );
    const menu2 = (
      <Menu>
        {
          customOriginList.map(item => {
            return customIds.indexOf(item.id) === -1 ? (
              <Menu.Item key={item.id} onClick={() => this.addCustom(item)}>{item.resourceName}</Menu.Item>
            ) : ''
          })
        }
      </Menu>
    );

    return (
      <Drawer
        visible={visible}
        onClose={this.onClose}
        width={'100%'}
        title={id ? readOnly ? formatMessage({ id: 'chargingManage.packageManage.packageDrawer.viewPackage' }) : formatMessage({ id: 'chargingManage.packageManage.packageDrawer.editPackage' }) : formatMessage({ id: 'chargingManage.packageManage.packageDrawer.newPackage' })}
        bodyStyle={{height:"calc(100vh - 60px)",overflowY:"auto"}}
      >
        <Form {...formItemLayout} style={{marginBottom:60}}>
          <h3>{formatMessage({ id: 'chargingManage.packageManage.packageDrawer.basicInfo' })}</h3>
          <Form.Item label={formatMessage({ id: 'chargingManage.packageManage.packageDrawer.packageName' })}>
            {getFieldDecorator('name', {
              rules: [{ required: true, message: formatMessage({ id: 'chargingManage.packageManage.packageDrawer.pleaseInputPackageName' }) }],
              getValueFromEvent: event => event.target.value.replace(/\s+/g, '')
            })(<Input autoComplete="off" disabled={this.state.readOnly || this.state.editPackage} />)}
          </Form.Item>
          <Form.Item label={formatMessage({ id: 'chargingManage.packageManage.packageDrawer.agreedPurpose' })}>
            {getFieldDecorator('purpose', {
              rules: [{ required: true, message: formatMessage({ id: 'chargingManage.packageManage.packageDrawer.pleaseSelect' }) }],
            })(
              <Select disabled={this.state.readOnly || this.state.editPackage}>
                <Select.Option value={0}>{formatMessage({ id: 'chargingManage.packageManage.packageDrawer.common' })}</Select.Option>
                <Select.Option value={1}>{formatMessage({ id: 'chargingManage.packageManage.packageDrawer.special' })}</Select.Option>
              </Select>
            )}
          </Form.Item>
          <Form.Item label={formatMessage({ id: 'chargingManage.packageManage.packageDrawer.effectiveDate' })}>
            {getFieldDecorator('enableDate', {
              rules: [{ required: true, message: '请输入' }],
            })(<DatePicker disabled={this.state.readOnly || this.state.editPackage} />)}
          </Form.Item>
          <Form.Item label={formatMessage({ id: 'chargingManage.packageManage.packageDrawer.expiryDate' })}>
            {getFieldDecorator('disableDate', {
              rules: [{ required: true, message: '请输入' }],
            })(<DatePicker disabled={this.state.readOnly || this.state.editPackage} />)}
          </Form.Item>
          <Form.Item label={formatMessage({ id: 'chargingManage.packageManage.packageDrawer.packageType' })}>
            {getFieldDecorator('typeIds', {
              rules: [{ required: true, message: '请输入' }],
            })(
              <Select disabled={this.state.readOnly || this.state.editPackage} mode="multiple" >
                {
                  packageTypeOptions.map((item => <Select.Option value={item.code} key={item.code}>{item.name}</Select.Option>))
                }
              </Select>
            )}
          </Form.Item>
          <Form.Item label={formatMessage({ id: 'chargingManage.packageManage.packageDrawer.description' })}>
            {getFieldDecorator('describeStr')(<Input.TextArea autoComplete="off" autoSize={{minRows:3,maxRows:10}} disabled={this.state.readOnly || this.state.editPackage} />)}
          </Form.Item>

          <Divider style={{marginTop:0}} />

          <h3>{formatMessage({ id: 'chargingManage.packageManage.packageDrawer.resources' })}</h3>
          {
            isAdmin ? (
              <Form.Item label={formatMessage({ id: 'chargingManage.packageManage.packageDrawer.disk' })}>
                {this.renderNumberBox(getFieldValue,getFieldDecorator,{
                  fieldPrefix:'0',
                  isEveryOne:false,
                  unitText:'M'
                })}
              </Form.Item>
            ) : ''
          }
          
          <Form.Item label={formatMessage({ id: 'chargingManage.packageManage.packageDrawer.usageDuration' })}>
            {this.renderNumberBox(getFieldValue,getFieldDecorator,{
              fieldPrefix:'1',
              isEveryOne:true,
              unitText:'min'
            })}
          </Form.Item>
          <Form.Item label={formatMessage({ id: 'chargingManage.packageManage.packageDrawer.qaCount' })}>
            {this.renderNumberBox(getFieldValue,getFieldDecorator,{
              fieldPrefix:'2',
              isEveryOne:true,
              unitText:'次'
            })}
          </Form.Item>

          <Divider style={{marginTop:0}} />

          {
            isAdmin ? (
              <div>
                <h3>{formatMessage({ id: 'chargingManage.packageManage.packageDrawer.knowledge' })}</h3>
                <Form.Item label={formatMessage({ id: 'chargingManage.packageManage.packageDrawer.knowledgePoint' })}>
                  {this.renderNumberBox(getFieldValue,getFieldDecorator,{
                    fieldPrefix:'3',
                    isEveryOne:false,
                    unitText:'个'
                  })}
                </Form.Item>
                <Form.Item label={formatMessage({ id: 'chargingManage.packageManage.packageDrawer.mindMap' })}>
                  {this.renderNumberBox(getFieldValue,getFieldDecorator,{
                    fieldPrefix:'4',
                    isEveryOne:false,
                    unitText:'个'
                  })}
                </Form.Item>
                <Form.Item label={formatMessage({ id: 'chargingManage.packageManage.packageDrawer.document' })}>
                  {this.renderNumberBox(getFieldValue,getFieldDecorator,{
                    fieldPrefix:'7',
                    isEveryOne:false,
                    unitText:'个'
                  })}
                </Form.Item>
                <Form.Item label={formatMessage({ id: 'chargingManage.packageManage.packageDrawer.multipleRounds' })}>
                  {this.renderNumberBox(getFieldValue,getFieldDecorator,{
                    fieldPrefix:'5',
                    isEveryOne:false,
                    unitText:'个'
                  })}
                </Form.Item>

                <Divider style={{marginTop:0}} />
              </div>
            ) : ''
          }

          

          <h3>{formatMessage({ id: 'chargingManage.packageManage.packageDrawer.model' })}</h3>
          {
            modelList.map(item => {
              return (
                <Form.Item label={item.resourceName} key={item.id} style={{position:"relative"}}>
                  {this.renderNumberBox(getFieldValue,getFieldDecorator,{
                    fieldPrefix:item.id,
                    isEveryOne:true,
                    unitText:'token',
                    modelType:true,
                    showRemove:true
                  })}
                  <Icon type='delete' style={{cursor:"pointer",position:"absolute",right:0,top:"50%",transform:"translateY(-50%)"}} onClick={() => this.removeModel(item.id)} />
                </Form.Item>
              )
            })
          }
          <Form.Item label=" " colon={false}>
            <Dropdown overlay={menu} trigger={['click']} disabled={this.state.readOnly}><Button icon="plus" disabled={this.state.readOnly}>{formatMessage({ id: 'chargingManage.packageManage.packageDrawer.addModel' })}</Button></Dropdown>
          </Form.Item>

          <Divider style={{marginTop:0}} />

          {
            isAdmin ? (
              <div>
                <h3>{formatMessage({ id: 'chargingManage.packageManage.packageDrawer.serviceProvider' })}</h3>
                <Form.Item label={formatMessage({ id: 'chargingManage.packageManage.packageDrawer.companyCount' })}>
                  {this.renderNumberBox(getFieldValue,getFieldDecorator,{
                    fieldPrefix:'8',
                    isEveryOne:false,
                    unitText:'个'
                  })}
                </Form.Item>
                <Form.Item label={formatMessage({ id: 'chargingManage.packageManage.packageDrawer.companyAdmin' })}>
                  {this.renderNumberBox(getFieldValue,getFieldDecorator,{
                    fieldPrefix:'9',
                    isEveryOne:false,
                    unitText:'个'
                  })}
                </Form.Item>

                <Divider style={{marginTop:0}} />
              </div>
            ) : ''
          }

          

          <h3>{formatMessage({ id: 'chargingManage.packageManage.packageDrawer.userSide' })}</h3>
          <Form.Item label={formatMessage({ id: 'chargingManage.packageManage.packageDrawer.userAdmin' })}>
            {this.renderNumberBox(getFieldValue,getFieldDecorator,{
              fieldPrefix:'10',
              isEveryOne:false,
              unitText:'个'
            })}
          </Form.Item>
          

          <Divider style={{marginTop:0}} />

          {
            isAdmin ? (
              <div>
                <h3>{formatMessage({ id: 'chargingManage.packageManage.packageDrawer.aiConsultant' })}</h3>
                <Form.Item label={formatMessage({ id: 'chargingManage.packageManage.packageDrawer.aiConsultant' })}>
                  {this.renderNumberBox(getFieldValue,getFieldDecorator,{
                    fieldPrefix:'13',
                    isEveryOne:false,
                    unitText:'个'
                  })}
                </Form.Item>

                <Divider style={{marginTop:0}} />
              </div>
            ) : ''
          }

          <h3>{formatMessage({ id: 'chargingManage.packageManage.packageDrawer.workOrder' })}</h3>
          <Form.Item label={formatMessage({ id: 'chargingManage.packageManage.packageDrawer.workOrderQuantity' })}>
            {this.renderNumberBox(getFieldValue,getFieldDecorator,{
              fieldPrefix:'14',
              isEveryOne:false,
              unitText:'个'
            })}
          </Form.Item>
          <Form.Item label='工单时长'>
            {this.renderHourBox(getFieldValue,getFieldDecorator,{
              fieldPrefix:'17',
              isEveryOne:false,
              unitText:'小时'
            })}
          </Form.Item>

          <Divider style={{marginTop:0}} />

          <h3>自定义资源</h3>
          {
            customList && customList.length > 0 ? (
              <Form.Item label=" " colon={false}>
                {
                  customList.map(item => {
                    return <Tag style={{marginRight:8}} closable={!this.state.readOnly || this.state.editPackage} onClose={() => this.removeCustom(item.id)} key={item.id}>{item.resourceName}</Tag>
                  })
                }
              </Form.Item>
            ) : ''
          }
          
          <Form.Item label=" " colon={false}>
            <Dropdown overlay={menu2} trigger={['click']} disabled={this.state.readOnly || this.state.editPackage}><Button icon="plus" disabled={this.state.readOnly}>添加自定义资源</Button></Dropdown>
          </Form.Item>

          <Divider style={{marginTop:0}} />

          <Form.Item label={formatMessage({ id: 'chargingManage.packageManage.packageDrawer.packagePrice' })} colon={false}>
            {
              getFieldDecorator("price",{rules:[{required:true,message:"请输入"}]})(
                <InputNumber min={0} disabled={this.state.readOnly || this.state.editPackage} />
              )
            }
            <span>{formatMessage({ id: 'chargingManage.packageManage.packageDrawer.yuan' })}</span>
          </Form.Item>

          {
            this.state.readOnly ? '' : (
              <div
                style={{
                  position: 'absolute',
                  right: 0,
                  bottom: 0,
                  width: '100%',
                  borderTop: '1px solid #e9e9e9',
                  padding: '10px 16px',
                  background: '#fff',
                  textAlign: 'right',
                }}
              >
                <Button style={{ marginRight: 8 }} onClick={this.onClose}>{formatMessage({ id: 'chargingManage.packageManage.packageDrawer.cancel' })}</Button>
                <Button onClick={this.validateForm} type="primary">{formatMessage({ id: 'chargingManage.packageManage.packageDrawer.confirm' })}</Button>
              </div>
            )
          }
          
        </Form>
      </Drawer>
    )
  }
}

export default Form.create()(PackageDrawer)